<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 基本文本和字体样式 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals -->


    <!-- 文本布局 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#%E6%96%87%E6%9C%AC%E5%B8%83%E5%B1%80 -->


    <!-- text-align 属性用来控制文本如何和它所在的内容盒子对齐。 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align -->
    <p>text-align</p>
    <p style="text-align: center;">text-align</p>

    <hr>

    <!-- text-indent -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent -->
    <!-- text-indent 属性能定义一个块元素首行文本内容之前的缩进量。 -->
    <p style="background-color: navajowhite;">text-indent</p>
    <p style="text-indent: 2em; background-color: navajowhite;">text-indent</p>

    <hr>

    <!-- 行高 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#hidden_example2 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height -->
    <!-- line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 -->
    <p style="line-height: normal; background-color: navajowhite;">line-height</p>
    <p style="line-height: 3.5; background-color: navajowhite;">line-height</p>

    <hr>

    <!-- direction -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction -->
    <!-- CSS属性 direction 用来设置文本、表列水平溢出的方向。  rtl 表示从右到左 (类似希伯来语或阿拉伯语)， ltr 表示从左到右 (类似英语等大部分语言). -->
    <p style="background-color: navajowhite;">direction</p>
    <p style="direction: ltr; background-color: navajowhite;">direction</p>
    <p style="direction: rtl; background-color: navajowhite;">direction</p>

    <hr>

    <!-- vertical-align -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align -->
    <!-- CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 -->
    <p>
        <img src="img12.jpg" style="width: 300px;" alt="" srcset="">
        This is vertical-align content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px;" alt="" srcset="">
        This is <span style="background-color: navajowhite; vertical-align: top;">vertical-align(top)</span> content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px; vertical-align: top;" alt="" srcset="">
        This is <span style="background-color: navajowhite;">vertical-align(top)</span> content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px;" alt="" srcset="">
        This is <span style="background-color: navajowhite; vertical-align: middle;">vertical-align(middle)</span>
        content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px; vertical-align: middle;" alt="" srcset="">
        This is <span style="background-color: navajowhite;">vertical-align(middle)</span>
        content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px;" alt="" srcset="">
        This is <span style="background-color: navajowhite; vertical-align: bottom;">vertical-align(bottom)</span>
        content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px; vertical-align: bottom;" alt="" srcset="">
        This is <span style="background-color: navajowhite;">vertical-align(bottom)</span>
        content
    </p>
    <p>
        <img src="img12.jpg" style="width: 300px;" alt="" srcset="">
        This is <span style="background-color: navajowhite; vertical-align: 50%;">vertical-align(bottom)</span>
        content
    </p>
    <div>
        <table border="" style="border: 1px solid #F00;">
            <tr>
                <td style="vertical-align: baseline;">vertical-align: baseline;</td>
                <td style="vertical-align: top;">vertical-align: top;</td>
                <td style="vertical-align: middle;">vertical-align: middle;</td>
                <td style="vertical-align: bottom;">vertical-align: bottom;</td>
                <td>
                    <p>There is a theory which states that if ever anyone discovers exactly what the Universe is for and
                        why it is here, it will instantly disappear and be replaced by something even more bizarre and
                        inexplicable.</p>
                    <p>There is another theory which states that this has already happened.</p>
                </td>
            </tr>
        </table>
    </div>

    <hr>

    <!-- 颜色 -->
    <!-- color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#color -->

    <!-- color -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/color -->
    <!-- colorCSS属性设置颜色值的前景色以及文本装饰，并设置currentcolor (en-US)值。currentcolor可以对其他颜色属性用作不直接的值，比如border-color。 -->
    <p style="color: red;">color</p>
    <p style="color: #00ff00;">color</p>
    <p style="color: rgb(0, 0, 255);">color</p>
    <!-- text-decoration -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration -->
    <!-- text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。 -->
    <p style="text-decoration: underline;">text-decoration</p>

    <hr>

    <!-- text-transform -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform -->
    <!-- text-transform: 允许你设置要转换的字体。 -->
    <!-- text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。 -->
    <p style="text-transform: capitalize;">text-transform</p>
    <p style="text-transform: uppercase;">text-transform</p>

    <hr>

    <!-- 字母和单词间距 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals -->
    <!-- letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units. -->
    <!-- letter-spacing -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/letter-spacing -->
    <!-- CSS 的 letter-spacing 属性用于设置文本字符的间距表现。 -->
    <p>letter-spacing</p>
    <p style="letter-spacing: 4pt;">letter-spacing</p>
    <p style="letter-spacing: -2pt;">letter-spacing</p>
    <!-- word-spacing -->
    <!-- 属性 word-spacing 用于声明标签和单词直接的间距行为。 -->
    <p>word-spacing</p>
    <p style="word-spacing: 30px;">word spacing</p>
    <p style="word-spacing: -10px;">word spacing</p>



</body>

</html>